<template>
    <div class="headers" :class="theme">
        <router-link to="/">
            <div class="logo" style="margin-top:15px;"/>
        </router-link>
        <div class="menu">
            <router-link class="link" :to="item.path" :class=" $route.path == item.path ? 'selected':'' "
                         v-for="(item) in menus" :key="item.path"><span>{{item.name}}</span><span>{{item.en}}</span>
            </router-link>
        </div>
<!--        <div style="flex:1"></div>-->
<!--        <div></div>-->
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                menus: [
                    {path: "/product", name: "产品", en: "product"},
                    {path: "/dev", name: "开发", en: "develop"},
                    {path: "/test", name: "测试", en: "test"},
                    {path: "/ops", name: "运维", en: "operation"}
                ]
            }
        },
        props: {
            theme: {type: String, default: ""}
        },
        mounted() {
            this.path = this.$route.path;
        },
        computed: {
            onRoutes() {
                let arr = this.$route.path.split('/');
                return '/' + arr[1];
            }
        },
        methods: {}
    }

</script>
<style scoped>
    .headers {
        display: flex;
        z-index: 1001;
        position: relative;
        color: #000;
        padding-top: 10px;
        padding-left: 50px;
        flex-direction: row;
        flex-wrap: wrap;
        background-color: #383a8b;
    }

    .headers .logo {
        background: url(../assets/logo2.png) no-repeat;
        width: 165px;
        height: 73px;
        background-size: contain;
    }

    .headers * {
        color: white;
    }

    .headers .selected {
        color: #c8a800;
    }

    .menu {
        padding-left: 30px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    /*@media screen and (max-width: 40rem) {*/
    /*    .menu {*/
    /*        padding-left: 0;*/
    /*        justify-content: center;*/
    /*        margin: 20px auto;*/
    /*    }*/

    /*    .headers {*/
    /*        padding-left: 0;*/
    /*        justify-content: center;*/
    /*    }*/

    /*    .fan * {*/
    /*        color: #000 !important;*/
    /*    }*/

    /*    .headers .logo {*/
    /*        background: url(../assets/logo.png) no-repeat;*/
    /*    }*/
    /*}*/

    .menu > a {
        display: flex;
        align-items: center; /*垂直居中*/
        justify-content: center; /*水平居中*/
        margin: 5px 15px;
        flex-direction: column;
        font-size: 1.6rem;
        min-width: 5rem;
    }

    .menu > a span:last-child {
        font-size: 1.2rem;
    }

    .menu span {
        text-transform: uppercase;
    }

    .fan {
        color: #fff;
    }
</style>
